import React, { useState, useEffect } from 'react';
import { AlertTriangle, Phone, MapPin, Clock, Activity, ShieldAlert } from 'lucide-react';

interface DispatchInfo {
  id: string;
  station: string;
  status: string;
  leader: string;
  phone: string;
  reason?: string;
}

// 模拟数据 - 可以通过URL参数控制数量
const generateDispatchData = (count: number): DispatchInfo[] => {
  const stations = ['朝天门派出所', '解放碑派出所', '南岸派出所', '江北派出所', '渝中派出所', '大渡口派出所', '九龙坡派出所', '沙坪坝派出所', '北碚派出所', '渝北派出所', '巴南派出所', '綦江派出所'];
  const statuses = ['出警中', '待命', '返回中', '处理中'];
  const leaders = ['张伟', '李强', '王军', '刘涛', '陈明', '赵亮', '孙华', '周杰', '吴刚', '郑波', '冯磊', '何斌'];
  const reasons = ['交通事故处理', '治安纠纷调解', '火灾救援', '群众求助', '巡逻执勤', '案件调查', '应急处置', ''];

  return Array.from({ length: count }, (_, i) => ({
    id: `dispatch-${i + 1}`,
    station: stations[i % stations.length],
    status: statuses[i % statuses.length],
    leader: leaders[i % leaders.length],
    phone: `138${String(Math.floor(Math.random() * 100000000)).padStart(8, '0')}`,
    reason: reasons[i % reasons.length] || undefined
  }));
};

function DispatchInfo() {
  const [dispatchList, setDispatchList] = useState<DispatchInfo[]>([]);
  const [scrollPosition, setScrollPosition] = useState(0);
  const [isScrolling, setIsScrolling] = useState(false);

  useEffect(() => {
    // 从URL参数获取数据数量，默认为9
    const urlParams = new URLSearchParams(window.location.search);
    const count = parseInt(urlParams.get('count') || '9');
    const data = generateDispatchData(count);
    setDispatchList(data);
    setIsScrolling(data.length > 9);
  }, []);

  useEffect(() => {
    if (!isScrolling || dispatchList.length <= 9) return;

    const interval = setInterval(() => {
      setScrollPosition(prev => {
        const maxScroll = (dispatchList.length - 9) * 120; // 每项高度约120px
        return prev >= maxScroll ? 0 : prev + 120;
      });
    }, 3000); // 每3秒滚动一次

    return () => clearInterval(interval);
  }, [isScrolling, dispatchList.length]);

  const currentDate = new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).replace(/\//g, '年').replace(/年(\d+)年/, '年$1月') + '日';

  const getStatusColor = (status: string) => {
    switch (status) {
      case '出警中': return 'text-red-400';
      case '处理中': return 'text-yellow-400';
      case '返回中': return 'text-blue-400';
      case '待命': return 'text-green-400';
      default: return 'text-white';
    }
  };

  return (
    <div className="min-h-screen w-full relative overflow-hidden bg-gradient-to-br from-slate-900 via-blue-900 to-slate-800">
      {/* 高德地图背景 */}
      <div className="absolute inset-0 opacity-20">
        <img src="./map.png" className="w-full h-full object-cover" alt="地图背景" />
      </div>

      {/* 动态背景效果 */}
      <div className="absolute inset-0 overflow-hidden pointer-events-none">
        {/* 粒子效果 */}
        <div className="absolute inset-0">
          {Array.from({ length: 40 }).map((_, i) => (
            <div
              key={i}
              className="absolute -top-6 w-4 h-4 bg-cyan-400/20 rounded-full particle-float"
              style={{
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 10}s`,
                animationDuration: `${8 + Math.random() * 6}s`
              }}
            />
          ))}
        </div>
      </div>

      {/* 主要内容区域 */}
      <div className="relative z-10 h-full flex flex-col px-16 py-20">
        {/* 顶部标题区域 */}
        <div className="text-center mb-20">
          <div className="flex items-center justify-center mb-8">
            <div className="h-1 w-32 bg-gradient-to-r from-transparent via-cyan-400 to-transparent glow-line"></div>
            <div className="mx-8 relative">
              <ShieldAlert className="text-cyan-400 drop-shadow-2xl" size={100} />
              <div className="absolute inset-0 bg-cyan-400/20 rounded-full blur-xl animate-pulse"></div>
            </div>
            <div className="h-1 w-32 bg-gradient-to-r from-transparent via-cyan-400 to-transparent glow-line"></div>
          </div>
          <h1 className="text-6xl font-bold text-white mb-6 tracking-wider drop-shadow-2xl">
            出警信息表
          </h1>
          <div className="text-4xl text-cyan-300 tracking-widest opacity-90 font-bold">
            {currentDate}
          </div>
        </div>

        {/* 出警信息列表 */}
        {/* <div className="flex-1 site-bg2">
          <div className="glass-card p-12 border border-cyan-500/30 shadow-2xl card-glow h-full"> */}
        <div><div>
            <div className="relative h-full overflow-hidden">
              <div 
                className="transition-transform duration-1000 ease-in-out"
                style={{ 
                  transform: `translateY(-${scrollPosition}px)`,
                  height: isScrolling ? 'auto' : '100%'
                }}
              >
                <div className="space-y-12">
                  {dispatchList.map((dispatch, index) => (
                    <div key={dispatch.id} className="glass-item p-12 border border-cyan-400/20 site-bg2  card-glow">
                      <div className="grid grid-cols-2 gap-8">
                        <div className="space-y-4">
                          <div className="flex items-center"> 
                              <div className="text-4xl text-gray-300">派出所：</div>
                              <div className="text-4xl font-bold text-white drop-shadow-lg">
                                {dispatch.station}
                              </div> 
                          </div>
                          
                          <div className="flex items-center">  
                              <div className="text-4xl text-gray-400">带队民警：</div>
                              <div className="text-4xl font-bold text-white drop-shadow-lg">
                                {dispatch.leader}
                              </div> 
                          </div>
                        </div>

                        <div className="space-y-4">
                          <div className="flex items-center"> 
                              <div className="text-4xl text-gray-400">状态：</div>
                              <div className={`text-4xl font-bold drop-shadow-lg ${getStatusColor(dispatch.status)}`}>
                                {dispatch.status}
                              </div> 
                          </div>
                          
                          <div className="flex items-center"> 
                              <div className="text-4xl text-gray-400">电话：</div>
                              <div className="text-4xl font-bold text-white drop-shadow-lg">
                                {dispatch.phone}
                              </div> 
                          </div>
                        </div>
                      </div>

                      {dispatch.reason && (
                        <div className="mt-6 pt-6 border-t border-cyan-400/20">
                          <div className="text-4xl text-gray-400 mb-2">出警事由：</div>
                          <div className="text-4xl font-bold text-yellow-400 drop-shadow-lg">
                            {dispatch.reason}
                          </div>
                        </div>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* 滚动指示器 */}
            {isScrolling && (
              <div className="absolute bottom-8 right-8 flex items-center space-x-2">
                <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse"></div>
                <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse" style={{ animationDelay: '0.5s' }}></div>
                <div className="w-2 h-2 bg-cyan-400 rounded-full animate-pulse" style={{ animationDelay: '1s' }}></div>
                <div className="text-cyan-400 text-xl ml-2">滚动中</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}

export default DispatchInfo;